<template>
  <div class="detial">
    <myheader title="传智播客.黑马程序员Vue.js"></myheader>
    <header>
      <div class="left" @click="$router.back()">
        <van-icon name="arrow-left" />
        返回
      </div>
      <div class="center">图片详情</div>
      <div class="right"></div>
    </header>
    <div class="news">
      <div class="top">
        <h3>{{ newsDetails.title }}</h3>
        <p>
          {{ newsDetails.add_time }} {{ newsDetails.click }}次浏览 分类:经济生活
        </p>
      </div>

      <div class="newsContent">
        <img
          v-for="i in imagesGroup"
          :key="i"
          :src="i"
          alt=""
          @click="show = true"
        />
        <van-image-preview
          v-model="show"
          :images="imagesGroup"
          @change="onChange"
        >
          <template v-slot:index> </template>
        </van-image-preview>

        <!-- 文章内容 -->
        <div class="content" v-html="newsDetails.content">
          <!-- {{ newsDetails.content }} -->
        </div>
      </div>
    </div>
    <mycomment :id="id"> </mycomment>
  </div>
</template>

<script>
import myheader from "@/components/Header";
import mycomment from "@/components/Comment";
import { getNews, getImagesGroup } from "@/api/img";
export default {
  components: {
    myheader,
    mycomment,
  },
  props: ["id"],
  data() {
    return {
      newsDetails: {},
      imagesGroup: [],
      show: false, //
      index: 0,
      pageindex: 1, //评论页码
    };
  },
  methods: {
    //  点击图片预览
    onChange(index) {
      //   console.log(index);
    },
  },
  async mounted() {
    //  拿到文章详情
    let res = await getNews(this.id);
    // console.log(res);
    this.newsDetails = res.data.message[0];
    this.newsDetails.click = this.newsDetails.click + 1;
    this.newsDetails.add_time = this.newsDetails.add_time.slice(0, 10);
    // console.log(this.newsDetails);

    // 获取文章展示图片组
    let res2 = await getImagesGroup(this.id);
    // console.log(res2);
    this.imagesGroup = res2.data.message.map((v) => {
      return v.src;
    });
    // console.log(this.imagesGroup);
  },
};
</script>

<style lang="less" scoped>
.detial {
  padding-bottom: 50px;
}
header {
  height: 30px;
  background-color: #f7f7f7;
  color: #298ffe;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  box-shadow: 0px 1px 5px #888888ba;
  .left {
    .van-icon {
      vertical-align: sub;
    }
  }
  div {
    flex: 1;
  }
}

.news {
  width: 100%;
  padding: 0 10px;
  .top {
    border-bottom: 1px solid #ccc;
    h3 {
      color: #0e8bd2;
      margin: 15px 0;
    }
    p {
      color: #a5a7aa;
      margin-bottom: 20px;
      font-size: 14px;
    }
  }
  .newsContent {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    img {
      width: 30%;
      margin: 5px;
      height: 30%;
    }
    .content {
      text-indent: 2em;
      margin-top: 10px;
      p {
        text-indent: 2em;
      }
    }
  }
}
</style>